*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input{/*去掉输入框的外轮廓*/
  outline: none;
}
html,body{
  height: 100%;
}
body{
  display: flex;
  background: linear-gradient(to right, rgb(247,209,215),rgb(191,227,241));
}
.box{
  display: flex;
  width: 1050px;
  height: 600px;
  position: relative;/*相对定位:不脱离文档流*/  
  /*background-color: #fff;*/
  margin: auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 4px 1px 3px rgba(0,0,0,0.1);/*阴影*/
}
/*遮盖层*/
.pre-box{
  width: calc(1050px/2);/*可以用来计算*/
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;/*绝对定位:脱离文档流*/
  border-radius: 4px;
  background-color: #edd4dc;
  transition: 0.5s ease-in-out;/*过渡*/
  box-shadow: 4px 4px 3px rgba(0,0,0,0.1)
}
.pre-box h1{
  margin-top: 150px;
  text-align: center;
  color: white;
  letter-spacing: 5px;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}
.pre-box p{
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 20px 0;
  font-weight: bold;
  color: white;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}
.img-box{
  width: 200px;
  height: 200px;
  margin: 20px auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 4px 4px 3px rgba(0,0,0,0.1)
}
.img-box img{
  width: 100%;
  transition: 0.5s;/*过渡*/
}


/*标题和文本框*/
.login-form,
.register-form{/*群组选择器*/
  flex: 1;/*下三种的简写 如:(默认值)[flex:0 1 auto]*/
  /*flex-grow:按照设置速度变大;-shrink:按设置速度在缩小;-basis:占主轴空间*/
  height: 100%;
}
.title-box{
  height: 300px;
  line-height: 500px;
}
.title-box h1{
  text-align: center;
  color: white;
  letter-spacing: 5px;/*字符间距*/
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}
.input-box{
  display: flex;
  flex-direction: column;/*Y轴从上到下*/
  align-items: center;/*Y轴对齐方式*/
}
input{
  width: 60%;
  height: 40px;
  margin-bottom: 20px;
  text-indent: 4px;/*首行缩进*/
  border: 1px solid #b0cfe9;
  border-radius: 4px;
}
input:focus{/*匹配元素获取焦点时*/
  color: #b0cfe9;
}
input:focus::placeholder{
  opacity: 0;
}

/*按钮*/
.btn-box{
  display: flex;
  justify-content: center;
}
button{
  width: 100px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  margin: 0 7px;
  border: none;
  background-color: #69b3f0;
  color: white;
}
button:hover{
  cursor: pointer;/*光标样式*/
  opacity: 0.8;/*透明度*/
}
.btn-box p{
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: white;
}
.btn-box p:hover{
  cursor: pointer;
  border-bottom: 1px solid white;
}

